<template>
    <div class="box">
        <el-container>
            <div class="mostTop"></div>
            <el-header class="clearfix">
                <p class="addCourseTitle">课程介绍</p>
                <p class="return" @click="back()">< 返回</p>
            </el-header>
            <el-main class="clearfix">
                <div class="descLeft">
                    <div class="courseTit">
                        <img :src="pageInf.courseImage" alt="">
                        <p>{{pageInf.courseName}}</p>
                    </div>
                    <div class="courseDesc">
                        <div class="msgDesc clearfix">
                            <div class="courseLeft">开课时间</div>
                            <div class="courseRight">{{pageInf.courseStartTime}}</div>
                        </div>
                        <div class="msgDesc clearfix">
                            <div class="courseLeft">课程时长</div>
                            <div class="courseRight">{{pageInf.courseDuration}}周</div>
                        </div>
                        <div class="msgDesc clearfix">
                            <div class="courseLeft">课程老师</div>
                            <div class="courseRight">{{pageInf.teacherName}}</div>
                        </div>
                        <div class="msgDesc clearfix">
                            <div class="courseLeft">上课地址</div>
                            <div class="courseRight">{{pageInf.courseAddress}}</div>
                        </div>
                        <div class="studentNum">
                            <p><span>{{studentsNum}}</span>人</p>
                            <p>累计参与人数</p>
                        </div>
                    </div>
                </div>
                <div class="courseIntro">
                    <el-tabs v-model="activeName" class="choose">
                        <el-tab-pane label="课程介绍" name="first">
                            <p class="studyIntro">{{pageInf.courseDesc}}</p>
                            <img src="../assets/courseDesc.jpg" alt="">
                        </el-tab-pane>
                        <el-tab-pane label="签到记录" name="second">
                            <el-table
                                    :data="tableData"
                                    style="width: 100%"
                                    class="checkedList">
                                <el-table-column
                                        prop="studentName"
                                        label="名字"
                                        width="230">
                                </el-table-column>
                                <el-table-column
                                        prop="className"
                                        label="班级"
                                        width="250">
                                </el-table-column>
                                <el-table-column
                                        prop="sex"
                                        label="性别"
                                        width="220">
                                </el-table-column>
                                <el-table-column
                                        prop="studentId"
                                        label="学号"
                                        width="200">
                                </el-table-column>
                                <el-table-column
                                        prop="checkedTime"
                                        label="签到时间"
                                        width="180">
                                </el-table-column>
                            </el-table>
                            <!--<el-pagination-->
                            <!--:page-size="10"-->
                            <!--@current-change="handleCurrentChange"-->
                            <!--layout="prev, pager, next"-->
                            <!--:total="studentsNum">-->
                            <!--</el-pagination>-->
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                currentPage: 1,
                activeName: 'first',//右边选项卡默认选择课程介绍选项
                pageInf: '',//当前课程描述数据
                tableData: [],//学生签到数据
                studentsNum: 0,//签到学生人数
            }
        },
        methods: {
            //分页
            handleCurrentChange: function (currentPage) {
                //console.log(currentPage);
                this.currentPage = currentPage;
                this.Rendering()
            },
            //补零规则
            add0(m) {
                return m < 10 ? '0' + m : m
            },
            //将时间戳转换为日期格式
            format(shijianchuo) {
                //时间戳是整数，否则要parseInt转换
                var time = new Date(shijianchuo);
                var y = time.getFullYear();
                var m = time.getMonth() + 1;
                var d = time.getDate();
                return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ';
            },
            //返回
            back() {
                this.$router.go(-1)
            },
        },
        //点击导航栏课程按钮展示课程列表第一个课程详情
        /*created(){
            this.$axios({
                url:'/course/list',
            }).then((res)=>{
                var data = res.data.data.list;
                //console.log(data)
                for (var i = 0; i < data.length; i++) {
                    data[i].courseStartTime = this.format(data[i].courseStartTime)
                }
                //console.log(res)
                this.pageInf= data[0];
                //console.log(this.pageInf)
            }).catch((err)=>{
                //console.log(err)
            })
        },*/
        //点击课程列表里面的查看展示点击课程详情
        mounted() {
            //console.log(this.$route.query.id);
            var id = this.$route.query.id;
            this.$axios({
                url: `/course/desc/${id}`,
                params: id
            }).then((res) => {
                var data = res.data.data;
                //console.log(data)
                data.courseStartTime = this.format(data.courseStartTime);
                //console.log(res)
                this.pageInf = data;
                //console.log(res);
                // this.studentsNum=this.tableData.length;
            });
            //渲染学生签到表
            this.$axios({
                url: `/course/signed/${id}`,
                params: id
            }).then((res) => {
                //console.log(res);
                if (res.data.msg == '操作成功') {
                    var data = res.data.data;
                    //console.log(data);
                    for (var i = 0; i < data.length; i++) {
                        data[i].checkedTime = this.format(data[i].checkedTime)
                        if (data[i].sex == 1) {
                            data[i].sex = '男'
                        } else if (data[i].sex == 2) {
                            data[i].sex = '女'
                        }
                    }
                    this.tableData = data;
                    this.studentsNum = data.length;
                    // var n=Math.ceil(this.studentsNum/10);
                    // console.log(n);
                }
            });

        },
    };
</script>
<style lang="less" scoped>
    * {
        margin: 0;
        padding: 0;
    }

    .clearfix:after {
        content: '';
        clear: both;
        display: block;
    }

    .box {
        background: #f2f2f6;
    }

    .el-header {
        background-color: #fff;
        margin-top: 10px;
        line-height: 30px;

        .addCourseTitle {
            color: #333;
            float: left;
            font-size: 18px;
            margin-top: 16px;
        }

        .return {
            color: #333;
            float: right;
            font-size: 18px;
            cursor: pointer;
            margin-top: 16px;
        }

        .return:hover {
            color: #8cc5ff;
        }
    }

    .el-main {
        .descLeft {
            float: left;
            height: 740px;
            width: 28.5%;
        }

        .courseTit {
            width: 100%;
            height: 360px;
            background: #fff;

            img {
                width: 100%;
                height: 300px;
            }

            p {
                margin-left: 10px;
                font-family: '黑体';
                font-size: 14px;
                margin-top: 20px;
            }
        }

        .courseDesc {
            margin-top: 20px;
            width: 100%;
            height: 360px;
            background: #fff;
            /*overflow: hidden;*/

            .msgDesc {
                width: 100%;
                height: 70px;
                border-bottom: 2px solid #f2f2f6;

                .courseLeft {
                    float: left;
                    line-height: 70px;
                    margin-left: 10px;
                    font-size: 14px;
                    font-weight: bold;
                }

                .courseRight {
                    float: right;
                    line-height: 70px;
                    margin-right: 10px;
                    font-size: 14px;
                    font-family: '仿宋';
                }
            }

            .studentNum {
                padding-top: 10px;
                width: 110px;
                height: 62px;
                margin-left: 150px;
                border-left: 2px solid #f2f2f6;
                border-right: 2px solid #f2f2f6;

                p {
                    font-size: 14px;
                    line-height: 30px;
                    text-align: center;
                    font-family: '仿宋';

                    span {
                        font-size: 20px;
                        color: #3399ff;
                        font-weight: bolder;
                        font-family: '黑体';
                    }
                }
            }
        }

        .courseIntro {
            height: 740px;
            float: left;
            margin-left: 1.5%;
            background: #fff;
            width: 70%;
            overflow-y:scroll;
            .choose {
                width: 94%;
                margin-left: 30px;
                margin-top: 30px;

                .studyIntro {
                    margin-top: 25px;
                    width: 100%;
                    text-indent: 30px;
                    font-size: 14px;
                    line-height: 24px;
                    letter-spacing: 2px;
                    font-family: '仿宋';
                }

                img {
                    margin-top: 15px;
                    width: 100%;
                    height: 200px;
                }

                .checkedList {
                    margin-top: 25px;
                    margin-left: 20px;
                }

                .el-pagination {
                    margin-top: 20px;
                    float: right;
                }
            }
        }
    }

    body > .el-container {
        margin-bottom: 40px;
    }
</style>